<template>
	<div class="page">
		<mt-header title="竞价列表">
			<router-link :to="{name: 'bid-home'}" slot="left">
				<img class="back" :src="staticImgData.back" alt="">
			</router-link>
		</mt-header>
		<div v-if="pendingList.length === 0" class="mt46 f14 pad15 mt20 ta-c c-666 noInfo">
			暂无竞价信息
		</div>
		<v-loadmore v-else :top-method="loadTop" :bottom-method="loadBottom"
			:bottom-all-loaded="allLoaded"
			:auto-fill="false" bottomPullText="上拉加载" ref="loadmore" class="loadmore">
			<div class="list-box" v-for="(item,index) in pendingList" :key="index">
				<div class="list-con" @click="bidDetail(item)">
					<div class="list-mark">
						<p class="list-num">{{item ? item.inquirySheetNo : ''}}</p>
						<p class="list-state">{{item ? item.status : ''}}</p>
					</div>
					<div class="list-detail">
						<div class="list-address">
							<p>{{item ? item.originLocationCity : ''}}</p>
							<div class="img">
								<img class="car" :src="staticImgData.car" alt="">
								<img class="line" :src="staticImgData.line" alt="">
							</div>
							<p>{{item ? item.destLocationCity : ''}}</p>
						</div>
						<div class="list-text">
							<p>商品车数量：</p>
							<p>{{item ? item.totalShipCount : ''}}(台)</p>
						</div>
						<div class="list-text">
							<p>竞价时间：</p>
							<p>{{item ? item.competitionTime : ''}}</p>
						</div>
					</div>
				</div>
			</div>
		</v-loadmore>
		<v-loading v-show="loadingShow"></v-loading>
	</div>
</template>

<script>
	import { Header, Loadmore, Toast } from 'mint-ui'
	import Loading from '@/components/common/loading/loading'
	import * as BidApi from '@/api/bid'
	import * as ThreeStorage from '@/utils/store/token.js'
	export default {
	  name: 'winbid-list',
	  data() {
	    return {
	      loadingShow: false,
	      staticImgData: {
	        car: require('@/assets/image/v1/bid/car@2x.png'),
	        back: require('@/assets/image/v1/bid/back@2x.png'),
	        line: require('@/assets/image/v1/bid/line@2x.png')
	      },
	      pendingList: [],
	      pendingListParam: {
	        current: 1,
	        size: 6,
	        total: 1,
	        condition: {
	          queryFlag: '02',
	          bidPartyCode: ThreeStorage.getCarInfo().currentFleetId// 车队id
	        }
	      },
	      allLoaded: false, // 控制是否可上拉加载
	      scrollMode: 'auto' // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
	    }
	  },
	  components: {
	    Header,
	    'v-loading': Loading,
	    'v-loadmore': Loadmore
	  },
	  created() {
	    this.getPanding()
	  },
	  methods: {
	    loadTop() { // 组件提供的下拉触发方法
	      // 下拉刷新
	      this.loadingShow = true
	      this.allLoaded = false
	      this.pendingListParam.current = 1
	      this.getPanding()
	      this.$refs.loadmore.onTopLoaded() // 固定方法，查询完要调用一次，用于重新定位
	    },
	    loadBottom() {
	      // 上拉加载
	      this.loadingShow = true
	      this.getMore() // 上拉触发的分页查询
	      this.$refs.loadmore.onBottomLoaded() // 固定方法，查询完要调用一次，用于重新定位
	    },
	    getPanding() {
	      BidApi.getDealList(this.pendingListParam).then(res => {
	        console.log(res)
	        this.loadingShow = false
	        if (res.code === 0) {
	          this.pendingList = res.data.records
	        } else {
	          Toast({
	            message: res.message,
	            duration: 1500
	          })
	          this.loadingShow = false
	        }
	        this.$nextTick(() => {
	          this.scrollMode = 'touch'
	        })
	      }).catch(res => {
	        this.loadingShow = false
	        Toast({
	          message: res.message || '系统繁忙，请稍候再试',
	          duration: 1500
	        })
	      })
	    },
	    getMore() {
	      // 分页查询
	      this.pendingListParam.current = parseInt(this.pendingListParam.current) + 1
	      BidApi.getDealList(this.pendingListParam).then(res => {
	        this.loadingShow = false
	        if (res.code === 0) {
	          this.pendingList = this.pendingList.concat(res.data.records)
	          if (this.pendingListParam.current > 1) {
	            this.isHaveMore(res.data)
	          }
	        }
	      }).catch(res => {
	        this.loadingShow = false
	        Toast({
	          message: res.message || '系统繁忙，请稍候再试',
	          duration: 1500
	        })
	      })
	    },
	    isHaveMore(data) {
	      // 是否还有下一页，如果没有就禁止上拉加载
	      const pendingListLength = this.pendingList.length
	      const alltotal = data.total
	      if (pendingListLength < alltotal) {
	        // 展示的条数小于后端总条数 还可以上拉加载更多
	        this.allLoaded = false
	      } else if (pendingListLength === alltotal) {
	        // 展示的条数等于后端总条数 无更多数据 不能进行上拉加载
	        this.allLoaded = true
	        Toast({
	          message: '没有更多数据了',
	          duration: 1000
	        })
	      }
	    },
	    bidDetail(val) {
	      const listInfo = {
	        inquirySheetNo: val.inquirySheetNo, // 订单号
	        originLocationCity: val.originLocationCity, // 始发地
	        destLocationCity: val.destLocationCity, // 目的地
	        totalShipCount: val.totalShipCount, // 商品数量
	        competitionTime: val.competitionTime, // 竞价时间
	        remarks: val.remarks, // 备注
	        id: val.id// 询价单id
	      }
	      ThreeStorage.setDealListInfo(listInfo)
	      this.$router.push({ name: 'winbid-report' })
	    }
	  }
	}
</script>

<style scoped>
	@import '../../styles/util.css';
	/* common */
	.page {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #eaf0f5;
	}
	.list-con{
		margin-top: 10px;
	}
	.list-con:last-child{
		margin-bottom: 10px;
	}
	.list-mark{
		position: relative;
		height: 0.38rem;
		text-align: left;
		border-bottom: 1px solid #eaf0f5;
	}
	.list-num{
		line-height: 0.38rem;
		font-size: 0.12rem;
		color: #434343;
		padding-left: 0.16rem;
	}
	.list-state{
		width: 0.55rem;
		height: 0.22rem;
		text-align: center;
		line-height: 0.22rem;
		color: #fff;
		background: #24cabc;
		border-radius: 0 0 0.06rem 0.06rem;
		position: absolute;
		top: 0;
		right: 0.16rem;
	}
	.list-address{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0.24rem 0 0.21rem 0;
		font-size: 0.17rem;
		font-weight: bold;
		color: #3f8afd;
	}
	.list-text{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.16rem .12rem 0.16rem;
		font-size: 0.12rem;
		color: #989898;
	}
</style>
